<template>
  <div class="singlepage" v-if="status === '2' || (status === '1' && step && step !== 'a')">
    <p-tabs v-model="activeName">
      <p-tab-pane key="first" tab="流程处理">
        <dealWith 
        :task-id="taskId" 
        :step="step" 
        :process-instance-id="processInstanceId"
        v-if="status === '1'"/>
      </p-tab-pane>
      <p-tab-pane key="second" tab="流程记录">  
        <processRecord
          :step="step"
          :status="status"
          :process-instance-id="processInstanceId"
          :task-id="taskId"/>  
       </p-tab-pane>
      <p-tab-pane key="three" tab="流程图" force-render>
        <div class="processPreview" v-if="activeName === 'three'">
          <iframCom :process-instance-id="processInstanceId" />
        </div>
      </p-tab-pane>
    </p-tabs>
  </div>
</template>
<script>
import dealWith from "./dealWith.vue";
import processRecord from "./processRecord.vue";
import iframCom from "./iframCom.vue";
export default {
  props: {
    step: String,
    status: String,
    processInstanceId: String,
    taskId: String,
  },
  components: {
    processRecord,
    dealWith,
    iframCom,
  },
  data() {
    return {
        activeName: 'first',
    };
  },
  computed: {
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    callback(key) {
      console.log(key);
    },
  },
  mounted(){
  },
};
</script>
<style scoped lang="less">
.singlepage{
  height: calc(100% - 10px);
  padding-top: 10px;
  }
.processPreview{
  padding-top: 10px;
  overflow: hidden;
}
</style>
